<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>保养计划详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="计划编号">{{ planInfo.planCode }}</el-descriptions-item>
        <el-descriptions-item label="计划名称">{{ planInfo.planName }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{ planInfo.equipmentCode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ planInfo.equipmentName }}</el-descriptions-item>
        <el-descriptions-item label="保养类型">{{ maintenanceTypeFormat(planInfo) }}</el-descriptions-item>
        <el-descriptions-item label="保养周期(天)">{{ planInfo.cycleDays }}</el-descriptions-item>
        <el-descriptions-item label="开始日期">{{ parseTime(planInfo.startDate, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="结束日期">{{ parseTime(planInfo.endDate, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="planInfo.status === '0' ? 'success' : 'info'">
            {{ planInfo.status === '0' ? '启用' : '停用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ planInfo.remark || '无' }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">保养项目</el-divider>

      <el-table :data="planItems" border style="width: 100%">
        <el-table-column prop="itemName" label="保养项目" width="180" />
        <el-table-column prop="standard" label="标准" />
      </el-table>

      <el-divider content-position="left">保养记录</el-divider>

      <el-table v-loading="loading" :data="maintenanceRecords" border style="width: 100%">
        <el-table-column label="保养单号" align="center" prop="maintenanceCode" />
        <el-table-column label="保养状态" align="center" prop="status">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '0' ? 'warning' : scope.row.status === '1' ? 'primary' : 'success'">
              {{ statusFormat(scope.row) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="计划日期" align="center" prop="planDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际完成日期" align="center" prop="actualDate" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.actualDate ? parseTime(scope.row.actualDate, '{y}-{m}-{d}') : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" align="center" prop="maintenancePerson" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleViewRecord(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="action-buttons">
        <el-button type="primary" @click="handleGenerateOrder" v-if="planInfo.status === '0'">生成保养单</el-button>
        <el-button type="warning" @click="handleEdit">编辑计划</el-button>
        <el-button type="info" @click="handleStatusChange">{{ planInfo.status === '0' ? '停用' : '启用' }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getMaintenancePlan } from "@/api/sb/maintenancePlan";

export default {
  name: 'MaintenancePlanDetail',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 保养计划信息
      planInfo: {},
      // 保养项目列表
      planItems: [],
      // 保养记录列表
      maintenanceRecords: [],
      // 保养类型选项
      maintenanceTypeOptions: [
        { dictLabel: '日常保养', dictValue: '0' },
        { dictLabel: '周期保养', dictValue: '1' },
        { dictLabel: '临时保养', dictValue: '2' }
      ],
      // 状态选项
      statusOptions: [
        { dictLabel: '待执行', dictValue: '0' },
        { dictLabel: '执行中', dictValue: '1' },
        { dictLabel: '已完成', dictValue: '2' }
      ]
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    if (id) {
      this.getInfo(id);
    }
  },
  methods: {
    /** 获取保养计划详细信息 */
    getInfo(id) {
      this.loading = true;
      getMaintenancePlan(id).then(response => {
        this.planInfo = response.data;
        
        // 获取保养项目，如果接口返回的数据中包含项目信息
        if (this.planInfo.items && this.planInfo.items.length > 0) {
          this.planItems = this.planInfo.items;
        }
        
        this.loading = false;
        this.getMaintenanceRecords();
      }).catch(error => {
        console.error("获取保养计划详情失败", error);
        this.$modal.msgError("获取保养计划详情失败");
        this.loading = false;
      });
    },
    /** 获取保养记录 */
    getMaintenanceRecords() {
      this.loading = true;
      // 从API获取保养记录列表，使用计划ID作为查询参数
      // 假设有此API: listMaintenanceOrdersByPlanId
      // 如果没有现成的API，需要后端实现或调整现有API
      this.$http.get('/ldzl-sb/maintenance/order/list', {
        params: { planId: this.planInfo.id || this.planInfo.planId }
      }).then(response => {
        this.maintenanceRecords = response.data.rows || [];
        this.loading = false;
      }).catch(error => {
        console.error("获取保养记录失败", error);
        this.maintenanceRecords = []; // 出错时设置为空数组
        this.loading = false;
      });
    },
    // 保养类型字典翻译
    maintenanceTypeFormat(row) {
      return this.selectDictLabel(this.maintenanceTypeOptions, row.maintenanceType);
    },
    // 状态字典翻译
    statusFormat(row) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 字典翻译
    selectDictLabel(datas, value) {
      if (value === undefined) {
        return "";
      }
      var actions = [];
      Object.keys(datas).some(key => {
        if (datas[key].dictValue == ('' + value)) {
          actions.push(datas[key].dictLabel);
          return true;
        }
      })
      return actions.join('');
    },
    /** 查看保养记录 */
    handleViewRecord(row) {
      const id = row.id;
      this.$router.push({ path: `/sb/Maintenance-sheet/detail/${id}` });
    },
    /** 生成保养单 */
    handleGenerateOrder() {
      this.$modal.confirm('确认生成保养单？').then(() => {
        // 实际应调用后端API
        this.$modal.msgSuccess("保养单生成成功");
        this.getMaintenanceRecords();
      }).catch(() => {});
    },
    /** 编辑计划 */
    handleEdit() {
      const id = this.planInfo.id;
      this.$router.push({ path: `/sb/Maintenance-plan/edit/${id}` });
    },
    /** 状态修改 */
    handleStatusChange() {
      const status = this.planInfo.status === '0' ? '1' : '0';
      const text = status === '0' ? '启用' : '停用';
      
      this.$modal.confirm('确认要"' + text + '""' + this.planInfo.planName + '"保养计划吗？').then(() => {
        // 实际应调用后端API
        this.planInfo.status = status;
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {});
    },
    /** 返回按钮 */
    cancel() {
      this.$router.push({ path: "/sb/Maintenance-plan" });
    }
  }
}
</script>

<style scoped>
.action-buttons {
  margin-top: 20px;
  text-align: center;
}
</style> 